import React, { PureComponent } from 'react'
import { Form, Modal, Row, Col, Button, Select, TreeSelect, Input, InputNumber, DatePicker, Radio } from 'antd'
import { DataList } from 'components'
import moment from 'moment';

const FormItem = Form.Item
const InputGroup = Input.Group;

@Form.create()
class Dialog extends PureComponent {

	render() {
		const { item = {}, currentDetail, itemDetails, modalType, onOk, onCancel, form, dispatch, loading,<#list forms as form><#if (form.type=='TreeSelect')> ${form.name}Tree,</#if></#list><#list forms as form><#if (form.type=='DataList')> ${namespace}${form.name? cap_first},<#elseif (form.type=='Table')><#list form.columns as column><#if (column.formType=='DataList')>${form.name}${column.name? cap_first},</#if></#list></#if></#list> ...modalProps } = this.props
		const { getFieldDecorator, validateFields, getFieldsValue, setFieldsValue, resetFields } = form
		
		const handleOk = () => {
			validateFields(errors => {
				if (errors) {
					return
				}
				const data = getFieldsValue()
				<#list forms as form><#if (form.type=='DataList')>
				data.${form.name}={"id":data.${form.name}Option.key}
				delete data.${form.name}Option
				</#if><#if (form.type=='TreeSelect')>
				data.${form.name}={"id":data.${form.name}Node.value}
				delete data.${form.name}Node
				</#if><#if (form.type=='DatePicker')>
				data.${form.name}=moment(data.${form.name}).format('YYYY-MM-DD')
				</#if></#list>
				data.details=[]
				for(let i=0;j<itemDetails.length;i++){
					var {id<#list forms as form><#if (form.type=='Table')><#list form.columns as column>, ${column.name}</#list></#if></#list>}=itemDetails[i]
					if(id<0){
						id=null
					}
					data.details.push({id<#list forms as form><#if (form.type=='Table')><#list form.columns as column><#if (column.name?ends_with('Id'))>, ${column?substring(0,(column.name?index_of('Id')))}:{id:${column.name}}<#else>, ${column.name}</#if></#list></#if></#list>})
				}
				onOk(data)
				resetFields()
			})
		}
		
		const handleChancel = () => {
			onCancel()
			resetFields()
		}
		
	<#list forms as form>
	<#if (form.type=='DataList')>
		const ${form.name}Props={
			dispatch,
			loading,
			filterItem:${namespace}${form.name? cap_first}.filterItem,
			dataSource:${namespace}${form.name? cap_first}.list,
			pagination:${namespace}${form.name? cap_first}.pagination,
			visible:${namespace}${form.name? cap_first}.visible,
			selectedRows:${namespace}${form.name? cap_first}.selectedRows,
			selectedRowKeys:${namespace}${form.name? cap_first}.selectedRowKeys,
			columns:[<#list form.columns as col>
			{
				title:'${col.title}',
				dataIndex: '${col.name}',<#if (col.align)>
				align:'left',</#if><#if (col.render)>
				render:(text, record) => {<#list col.constant as con>
					if(text==<#if (con.type=='String')>"${con.value}"<#else>${con.value}</#if>){
						return "${con.comment}"
					}</#list>
					return "";
				}</#if>
			},</#list>
			],
			namespace:'${namespace}${form.name? cap_first}',
			multiple:false,
			filterItems:[<#list form.filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.label}',
					target: '${filter.name}',
					tip: '輸入${filter.label}',
					key: '${filter.name}',
				},</#list>
			],
			modalProps:{
				title:'${form.title}列表',
				width:800,
			},
			onOk(keys,rows){
				item.${form.name}Id=keys.length==0 ? undefined : keys[0]
				item.${form.name}=rows.length==0 ? undefined : rows[0].name
				dispatch({type:'${namespace}/updateState',payload:{currentItem:item}})
				setFieldsValue({ ${form.name}Option: keys.length==0 ? undefined : { key: keys[0], label: rows[0].name } });
			},
		}
	<#elseif (form.type=='Table')>
		<#list form.columns as column>
			<#if (column.formType=='DataList')>
		const ${form.name}${column.name? cap_first}Props={
			dispatch,
			loading,
			filterItem:${form.name}${column.name? cap_first}.filterItem,
			dataSource:${form.name}${column.name? cap_first}.list,
			pagination:${form.name}${column.name? cap_first}.pagination,
			visible:${form.name}${column.name? cap_first}.visible,
			selectedRows:${form.name}${column.name? cap_first}.selectedRows,
			selectedRowKeys:${form.name}${column.name? cap_first}.selectedRowKeys,
			columns:[<#list column.form.columns as col><#if (column.name?ends_with('Id'))><#else>
			{
				title:'${col.title}',
				dataIndex: '${col.name}',<#if (col.align)>
				align:'left',</#if><#if (col.render)>
				render:(text, record) => {<#list col.constant as con>
					if(text==<#if (con.type=='String')>"${con.value}"<#else>${con.value}</#if>){
						return "${con.comment}"
					}</#list>
					return "";
				}</#if></#if>
			},</#list>
			],
			namespace:'${form.name}${column.name? cap_first}',
			multiple:false,
			filterItems:[<#list column.form.filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.label}',
					target: '${filter.name}',
					tip: '輸入${filter.label}',
					key: '${filter.name}',
				},</#list>
			],
			modalProps:{
				title:'${column.title}列表',
				width:800,
			},
			onOk(keys,rows){
				for(let i=0;j<itemDetails.length;i++){
					const detail=itemDetails[i]
					if(currentDetail.id==detail.id){
						detail.${column.name}Id=keys.length==0 ? undefined : keys[0]
						detail.${column.name}=rows.length==0 ? undefined : rows[0].name
					}
				}
				dispatch({type:'${namespace}/updateState',payload:{itemDetails:itemDetails}})
			},
		}
			</#if>
		</#list>
	</#if>
	</#list>
		const removeItem=(item)=>{
			let arr=itemDetails.filter(_=>_.id!=item.id)
			dispatch({type:'${namespace}/updateState',payload:{itemDetails:arr}})
		}
		
		const updateList = row => {
		    const newData = [...itemDetails];
		    const index = newData.findIndex(item => row.id === item.id);
		    const item = newData[index];
		    newData.splice(index, 1, {...item,...row});//替换第{index}个项目
		    dispatch({type:'${namespace}/updateState',payload:{itemDetails:newData}});
	  	}
	<#list forms as form>
	<#if (form.type=='Table')>
		const columns=[<#list form.columns as column>
			{
				title:'${column.title}',
				dataIndex: '${column.name}',<#if (column.align)>
				align:'left',</#if><#if (column.render)>
				render:(text, record) => {
					<#if (column.formType=='Input')>
					return (<${column.formType} style={{width:'100%'}} value={text} onBlur={e => {const newR={...record,${column.name}:e.target.value};updateList(newR)} }/>)
					<#elseif (column.formType=='InputNumber')>
					return (<${column.formType} style={{width:'100%'}} value={text} onBlur={e => {const newR={...record,${column.name}:e};updateList(newR)} }/>)
					<#elseif (column.formType=='Select')>
					return (<${column.formType} style={{width:'100%'}} value={text} onBlur={e => {const newR={...record,${column.name}:e};updateList(newR)} }/>)
					<#elseif (column.formType=='TreeSelect')>
					return (<${column.formType} style={{width:'100%'}} value={text} onBlur={e => {const newR={...record,${column.name}:e};updateList(newR)} }/>)
					<#elseif (column.formType=='DataList')>
					return (<InputGroup compact>
							<Select placeholder='${column.title}' style={{width:'80%'}} showArrow={false} labelInValue >
								<Select.Option value={record.${column.name}Id?record.${column.name}Id:''}>{record.${column.name}?record.${column.name}:''}</Select.Option>
							</Select>
							<Button style={{width:'20%'}} type="primary" onClick={e => {dispatch({ type:'${namespace}/updateState',payload:{currentDetail:record}});dispatch({type:'${form.name}${column.name? cap_first}/query'});dispatch({ type:'${form.name}${column.name? cap_first}/showModal' });}}>. . .</Button>
							</InputGroup>)
					<#elseif (column.formType=='DatePicker')>
					return (<${column.formType} style={{width:'100%'}} value={text} onBlur={e => {const newR={...record,${column.name}:moment(e).format('YYYY-MM-DD')};updateList(newR)} }/>)
					<#else>
					return (text);
					</#if>
				}</#if>
			},</#list>
			{
				title: '操作',
				width: 150,
				render: (text, record) => {
					return (<Button size={'small'} onClick={e=>removeItem(record)}>刪除</Button>)
				}
			}
		]
	</#if>
	</#list>
		return (
			<Modal {...modalProps} destroyOnClose onOk={handleOk} onCancel={handleChancel}>
			<Form>
				<Row gutter={10}><#list forms as form>
					<#if (form.type=='DataList')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
						<InputGroup compact>
							{getFieldDecorator('${form.name}Option', {
								initialValue: {key:item.${form.name}Id?item.${form.name}Id:'',label:item.${form.name}?item.${form.name}:''},
								rules: [
									{validator:async (rule, value) => {if(value.key==''){throw new Error('请选择${form.title}!');}}},
								],
							})
							(
								
								<Select placeholder='${form.title}'
								 	style={{width:'80%'}}
									showArrow={false}
									labelInValue >
									<Select.Option value={item.${form.name}Id?item.${form.name}Id:''}>{item.${form.name}?item.${form.name}:''}</Select.Option>
								</Select>
								
							)}
							<Button style={{width:'20%'}} type="primary" onClick={e => {dispatch({type:'${namespace}${form.name? cap_first}/query'});dispatch({ type:'${namespace}${form.name? cap_first}/showModal' })}}>. . .</Button>
						</InputGroup>
						</FormItem>
					</Col>
					<#elseif (form.type=='TreeSelect')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}Node', {
								initialValue: item.${form.name}Id==null?undefined:{value:item.${form.name}Id,label:item.${form.name}},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})
							(<TreeSelect placeholder='${form.title}' treeDefaultExpandAll labelInValue treeData={${form.name}Tree} />)}
						</FormItem>
					</Col>
					<#elseif (form.type=='Radio')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: item.${form.name},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})(<Radio.Group><#list form.constant as con><Radio value={${con.value}}>${con.comment}</Radio></#list></Radio.Group>)}
						</FormItem>
					</Col>
					<#elseif (form.type=='Select')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: item.${form.name},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})(
							<Select><#list form.constant as con>
								<Select.Option value={${con.value}}>${con.comment}</Select.Option></#list>
							</Select>)}
						</FormItem>
					</Col>
					<#elseif (form.type!='Table')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: <#if (form.type=='DatePicker')>item.${form.name}?moment(item.${form.name}):moment()<#else>item.${form.name}</#if>,
								rules: [
									{required: true,message:'请输入${form.title}!'},
								],
							})(<${form.type} style={{width:'100%'}}/>)}
						</FormItem>
					</Col></#if></#list>
	 			</Row>
			</Form>
			<#list forms as form>
			<#if (form.type=='DataList')>
			<DataList {...${form.name}Props}/>
			</#if>
			<#if (form.type=='Table')>
			<#-- -->
			<#list form.columns as column>
			<#if (column.formType=='DataList')>
			<DataList {...${form.name}${column.name? cap_first}Props}/>
			</#if>
			</#list>
			
			<Row>
				<Col span={24}>
				<Button onClick={e=>{dispatch({type:'${namespace}/addDetail'});}} type="primary">添加</Button>
				</Col>
				<Col span={24}>
					<Table rowKey={'id'} pagination={false} dataSource={itemDetails} columns={columns} />
				</Col>
			</Row>
			</#if>
			</#list>
			</Modal>
		)
	}
}
export default Dialog
